// var
@imageviewer-prefix-cls         : x-image-viewer;
@imageviewer-font-weight        : normal;
@imageviewer-font-color         : #cecece;
@imageviewer-font-size-small    : 12px;
@imageviewer-font-size          : 14px;
@imageviewer-font-size-large    : 16px;
@imageviewer-scroll-size        : 6px;
@imageviewer-content-bg         : #f3f4ed;
@imageviewer-toolbar-bg         : rgba(57,57,57,.6);
@imageviewer-brown-color        : #d0ba94;

// mixins
.imageviewer-size(@font-size) {
  .@{imageviewer-prefix-cls}__toolsbar {
    height: @font-size * 2.5;
    &_item {
      & + .@{imageviewer-prefix-cls}__toolsbar_item::before {
        top: @font-size * 0.5;
        height: @font-size * 1.5;
      }
    }
    &_btn {
      width: @font-size * 2.5;
      height: @font-size * 2.5;
      .xvu-iconfont {
        font-size: @font-size * 1.75;
      }
    }
  }
}

// styles - default
.@{imageviewer-prefix-cls} {
  display: inline-block;
  background-color: @imageviewer-content-bg;
  overflow: hidden;
  position: relative;
  .imageviewer-size(@imageviewer-font-size);
  &__scroll {
    display: inline-block;
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
    position: relative;
    .@{imageviewer-prefix-cls}__content {
      display: inline-block;
      min-width: 200px;
      min-height: 200px;
      position: relative;
      .@{imageviewer-prefix-cls}__image,
      .@{imageviewer-prefix-cls}__image_copy {
        object-fit: contain;
        max-width: unset;
      }
      .@{imageviewer-prefix-cls}__image {
        max-width: 100%;
        height: auto;
        visibility: hidden;
      }
      .@{imageviewer-prefix-cls}__image_copy {
        position: absolute;
        width: 100%;
        height: 100%;
        &:not([src])::before, &.error::before {
          outline: 1px solid #dedede;
        }
      }
    }
  }
  &__toolsbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: @imageviewer-scroll-size;
    z-index: 2;
    border-top: 2px solid @imageviewer-brown-color;
    box-shadow: 0 @imageviewer-scroll-size 0 @imageviewer-toolbar-bg;
    background-color: @imageviewer-toolbar-bg;
    display: flex;
    &_item {
      width: 0;
      flex-grow: 1;
      position: relative;
      & + .@{imageviewer-prefix-cls}__toolsbar_item::before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        background-color: tint(@imageviewer-toolbar-bg, 35%);
      }
    }
    &_btn {
      margin: auto;
      .flex-center;
      cursor: pointer;
      .xvu-iconfont {
        font-weight: 500;
        color: @imageviewer-font-color;
      }
      &:hover, &:active, &:focus {
        .xvu-iconfont {color: #fff;}
      }
    }
  }
}

// styles - more
.@{imageviewer-prefix-cls} {
  &-small {
    .imageviewer-size(@imageviewer-font-size-small);
  }
  &-large {
    .imageviewer-size(@imageviewer-font-size-large);
  }
}
